<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avater_box">
                <img src="../assets/img/yunangLogo.png" alt="出错了">
            </div>
            <!-- 表单登录页面 -->
            <el-form ref="loginFromRef" :model="loginFrom" class="login_form" :rules="loginFromRules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input class="input_color" placeholder="请输入账号(学号)" v-model="loginFrom.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="loginFrom.password" show-password prefix-icon="el-icon-key">
                    </el-input>
                </el-form-item>
                <!-- 按钮 -->
                <div class="btn">
                    <el-button type="primary" @click="login" @keyup.enter="keyDown(e)">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </div>
            </el-form>
        </div>
        <!-- 粒子背景 -->
        <vue-particles class="login-bg" color="#66ea6a" :particleOpacity="0.8" :particlesNumber="100" shapeType="circle"
            :particleSize="4" linesColor="#2dc4ce" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
            :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
            clickMode="push">
        </vue-particles>
    </div>
</template>
<script>
export default {
  data () {
    return {
      loginFrom: {
        username: '',
        password: ''
      },
      loginFromRules: {
        username: [
          { required: true, message: '请输入账号(学号)', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不小于6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    // 绑定监听事件
    window.addEventListener('keydown', this.keyDown)
  },
  destroyed () {
    // 销毁事件
    window.removeEventListener('keydown', this.keyDown, false)
  },
  methods: {
    resetLoginForm () {
      console.log(this)
      this.$refs.loginFromRef.resetFields()
    },
    // 点击回车键登录
    keyDown (e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13 || e.keyCode === 100) {
        this.login() // 定义的登录方法
      }
    },
    login () {
      this.$refs.loginFromRef.validate(async valid => {
        if (!valid) return
        this.$http({
          method: 'get',
          url: '/v1/oa/User/Login',
          params: {
            id: this.loginFrom.username,
            password: this.loginFrom.password
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success('登录成功')
            window.sessionStorage.setItem('token', res.data.data)
            window.sessionStorage.setItem('userId', this.loginFrom.username)
            window.sessionStorage.setItem('activePath', '/dashboard')
            window.sessionStorage.setItem('pathName', '首页')
            this.$router.push('/dashboard')
          } else {
            this.$message.error(res.data.data)
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login_container {
    background: url('@/assets/img/edge_background.jpg') no-repeat center center;
    height: 100vh;
    .login_box {
        width: 28.125rem;
        height: 18.75rem;
        border: 1px solid rgba(255, 255, 255,1);
        box-shadow: 0 0 5px #eee;
        border-radius: .3125rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgb(61, 99, 49);
        background-color: rgba(202, 240, 244, 0.57);
        .avater_box {
            width: 8.125rem;
            height: 8.125rem;
            border: 1px solid rgba(211, 211, 211, 0.571);
            border-radius: 50%;
            box-shadow: 0 0 .3125rem gray;
            padding: .625rem;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.8);
            left: 50%;
            transform: translate(-50%, -50%);

            img {
                width: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }

        .login_form {
            position: absolute;
            bottom: 1.875rem;
            padding: 1.25rem;
            box-sizing: border-box;
            width: 100%;

            .btn {
                display: flex;
                justify-content: flex-end;
            }
        }
    }
}
.login-bg {
    height: 100vh;
    overflow: hidden;
}
// 改变input里的字体颜色
/deep/input::-webkit-input-placeholder {
    font-size: 18px;
    color: rgb(54, 137, 76);
}

// 改变input框背景颜色
/deep/ .el-input__inner {
    background-color: transparent !important;
    border: 1px solid #fff;
}
</style>
